<template>
	<div class="ruijie-header-box">
		<ul class="ruijie-header-right">
			<li style="margin-right: 80px">
				<el-menu :default-active="currentPageName"  class="ruijie-titleMenu" mode="horizontal" ref="menu">
					<template v-for="item in menuList">
						<router-link v-if="item.children.length<=1&&isMenuPower(item.children[0])" :key="'menuitem' + item.name" :to="{name:item.children[0].name}">
							<el-menu-item  :index="item.children[0].name"  >
								<i :class="item.children[0].icon" v-if="item.children[0].icon"></i>
								<span slot="title">{{item.children[0].title}}</span>
							</el-menu-item>
						</router-link>

						<el-submenu  :index="item.name" :key="item.name" v-if="item.children.length>1">
							<template slot="title">
								<i :class="item.icon" v-if="item.icon"></i>
								<span>{{item.title}}</span>
							</template>
							<router-link v-for="child in item.children"  :key="child.name" :to="{name:child.name}" v-if="isMenuPower(child)">
								<el-menu-item  :index="child.name"  >
									<i :class="child.icon" v-if="child.icon"></i>
									<span slot="title">{{child.title}}</span>
								</el-menu-item>
							</router-link>
						</el-submenu>
					</template>
				</el-menu>
			</li>
			<li>
				<el-dropdown style="margin-right: 45px;cursor: pointer" trigger="click" size="small" >
					<div>
						<img src="../../../assets/images/touxiang.png" class="header-userimg"/>
						{{user.UserName}}
					</div>
					<el-dropdown-menu slot="dropdown">
						<el-dropdown-item @click.native="gomyCollection" >我的收藏</el-dropdown-item>
						<el-dropdown-item @click.native="showguide" >操作引导</el-dropdown-item>
						<el-dropdown-item @click.native="logOut" divided>退出登录</el-dropdown-item>
					</el-dropdown-menu>
				</el-dropdown>

			</li>
		</ul>
	</div>
</template>
<script type="es6">
import config from '../../../config';
import {mapState} from 'vuex';
import {appRouter} from '../../../router/router';
import {isMenuPower} from '../../../router';
import eventBus from '@/libs/eventBus';
export default {
  name: 'Header',
  data () {
    return {
      menuList: appRouter
    };
  },
  methods: {
    showlogin () {
      this.$SSO.showModal(config.system.SSOModalUrl);
    },
    Redirect () {
      this.$SSO.Redirect(config.system.SSORedirectlUrl);
    },
    logOut () {
      this.$store.commit('logOut');
      this.$SSO.Redirect(config.system.SSORedirectlUrl);
    },
    isMenuPower (menu) {
      let flg = isMenuPower(menu);
      return flg;
    },
    gomyCollection () {
      this.$router.push({name: 'myCollection'});
    },
    showguide () {
      eventBus.$emit('showguide');
    }
  },
  computed: {
    ...mapState({
      roles: state => state.roles,
      user: state => state.user
    }),
    currentPageName () {
      if (this.$route.meta && this.$route.meta.parentNode) {
        return this.$route.meta.parentNode;
      }
      return this.$route.name;
    }
  },
  mounted () {

  },
  watch: {
    currentPageName (val) {
      if (this.$refs.menu) {
        this.$refs.menu.activeIndex = val;
      }
    }
  }
};
</script>
<style lang="less">
	@import "../../../styles/common.less";

	.@{prefix} {
		&header-box {
			position: absolute;
			right: 0;
			left: 222px;
			background: #fff;
			height: 100%;
			line-height: 53px;
		}
		&header-right {
			float: right;
			li {
				display: inline-block;
				position: relative;
			}
		}
		&titleMenu{
			.el-menu-item, .el-submenu__title{
				height:60px;
				line-height: 60px;
			}
			.el-menu-item.is-active{
				border-bottom: 2px solid #409eff;
			}
		}
	}
	.ms-title{
		display: inline-block;
		margin: 9px 0 0 20px;
		position: absolute;
	}
	.header-userimg{
		height: 42px;
		position: absolute;
		top: 7px;
		right: 55px;
		width: auto;
	}
</style>
